<template>
  <div class="custom-tree-container">
    <div class="block">
      <el-tree
        :data="data"
        show-checkbox
        node-key="menuId"
        :expand-on-click-node="false">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ data.menuName }}
          <span>
            <el-button
                type="text"
                size="mini"
                @click="() => appendShow(data)">
                新增
              </el-button>
              <el-popconfirm
                title="该目录确定删除吗？"
                @confirm="() => remove(node, data)"
              >
                <el-button style="color: red;" type="text" size="mini" slot="reference">删除</el-button>
              </el-popconfirm>
          </span>
            </span>
        </span>
      </el-tree>
    </div>
    <el-dialog
      title="新增"
      :visible.sync="dialogVisible"
      width="20%"
      :before-close="handleClose">
      <el-form v-model="form" ref="form">
        <el-form-item label="名称:">
           <el-input v-model="form.menuName" size="mini" style="width: 80%;"></el-input>
        </el-form-item>
        <el-form-item label="地址:">
           <el-input v-model="form.url" size="mini" style="width: 80%;"></el-input>
        </el-form-item>
        <el-form-item label="排序:">
           <el-input v-model="form.orderId" type="number" size="mini" style="width: 80%;"></el-input>
        </el-form-item>
        <el-form-item label="类型:">
          <el-radio v-model="form.type" label="0">目录</el-radio>
          <el-radio v-model="form.type" label="1">子菜单</el-radio>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false;append()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

import { CODE_OK } from '@/common/js/config'
import { getMenuList, addMenu, delMenu } from "@/api/menu"

  let id = 1000;
    export default {
      data() {
        return {
          data: [],
          dialogVisible:false,
          form:{
            type:'2'
          },
          currentData:{}
        }
      },
      created(){
        getMenuList().then(res=>{
          this.data = res.menuList;
        }).catch();
      },
      methods: {
        initTree(){
          getMenuList().then(res=>{
            this.data = res.menuList;
          }).catch();
        },
        handleClose(){},
        appendShow(data){
          if(data.parentId != 0){
            this.$message.error("当前菜单暂不支持添加子菜单")
            return
          }
          this.currentData = data;
          this.dialogVisible = true
        },
        append() {
          const newChild = { menuId: id++, menuName: this.form.menuName, children: [] };
          //后端保存
          this.form.parentId = this.currentData.menuId;
          addMenu(this.form).then(res=>{
            if (res.code === CODE_OK) {
              this.$message.success('保存成功')
              this.initTree()
            }else{
              this.$message.error(res.msg)
            }
          }).catch();
          if (!this.currentData.children) {
            this.$set(this.currentData, 'children', []);
          }
          this.currentData.children.push(newChild);
        },
        remove(node, data) {
          delMenu(data.menuId).then(res=>{
            console.log(res)
          }).catch();
          const parent = node.parent;
          const children = parent.data.children || parent.data;
          const index = children.findIndex(d => d.menuId === data.menuId);
          children.splice(index, 1);
        }
      }
    };
</script>

<style>
  .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
    }
</style>
